const path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir);
}

const isPro = process.env.NODE_ENV === 'production';

module.exports = {
  indexPath: process.env.VUE_APP_INDEX_PATH,
  assetsDir: process.env.ASSETS_DIR_PATH,
  publicPath: process.env.PUBLIC_PATH,
  devServer: {
    host: '0.0.0.0',
    port: process.env.PORT,
    proxy: {
      '/mock': {
        target: process.env.VUE_APP_BASE_API,
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/mock': ''
        }
      }
    }
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/styles/variables.scss";`
      }
    }
  },
  chainWebpack (config) {
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      })
      .end();

    config.module
      .rule('lodash')
      .test(require.resolve('lodash'))
      .use('expose-loader')
      .loader('expose-loader')
      .options('_')
      .end();

    config
    // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      );
    // configurate eruda-webpack-plugin
    config
      .when(
        isPro && JSON.parse(process.env.ERUDA),
        config => {
          config
            .plugin('ErudaWebpackPlugin')
            .use(require('eruda-webpack-plugin'), [
              {
                force: true,
                entry: [/app.*\.js$/]
              }
            ])
            .end();
        }
      );

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end();
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                vant: {
                  name: 'chunk-vant', // split vant into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?vant(.*)/ // in order to adapt to cnpm
                },
                lodash: {
                  name: 'chunk-lodash',
                  priority: 18,
                  test: /[\\/]node_modules[\\/]lodash(.*)/
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            });
          config.optimization.runtimeChunk('single');
        }
      );
  }
};
